/*!
 * Page: pages/publish/publish
 * License: MIT
 * Created: 2019-10-16 18:06
 */

@import '../../var.scss';
page {
    background-color: $bgcolor-light;
}

#myCanvas {
    position: absolute;
    top: 10000px;
}

.publish {
    padding: 30rpx 30rpx 30rpx 30rpx;
    border-top: 1rpx solid $border-color;
    .themeTitle {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 70rpx;
        padding-bottom: 10rpx;
        margin-bottom: 20rpx;
        color: $title-color;
        font-size: 32rpx;
        border-bottom: 1rpx solid $border-color;
    }
    .textarea {
        width: 100%;
        height: 310rpx;
        max-height: 310rpx;
        max-lines: 8;
        margin-bottom: 30rpx;
    }
    textarea {
        width: 100%;
        height: 100%;
    }
    & .chosen {
        flex-wrap: wrap;
        // position: relative;
        justify-content: space-between;
        overflow: hidden;
        .video+.select {
            margin-left: 10rpx;
            background-color: $primary;
        }
        .primaryColor {
            background-color: $primary;
        }
        & .select {
            width: 160rpx;
            height: 160rpx;
            border: 1rpx solid $border-color;
            .re-record {
                color: #ffffff;
                font-size: 20rpx;
            }
            & .icon {
                width: 56rpx;
                height: 36rpx;
            }
        }
        .video {
            width: 160rpx;
            height: 160rpx;
        }
        .local-image {
            box-sizing: border-box;
            width: 160rpx;
            height: 160rpx;
            margin-bottom: 16.6666rpx;
            border: 1rpx solid $border-color;
        }
        .cover-view {
            position: absolute;
            top: 0;
            right: 0;
            width: 30rpx;
            height: 30rpx;
            color: red;
            background-color: rgba(255, 255, 255, 0.3);
        }
        .img {
            position: relative;
        }
        .delet {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            width: 58rpx;
            height: 58rpx;
        }
    }
}

.divider {
    width: 100%;
    height: 1rpx;
    background-color: $border-color;
    // margin-top: 50rpx;
}

.topics-title {
    padding: 30rpx 30rpx 0 30rpx;
    color: #808080;
    font-size: 26rpx;
    line-height: 26rpx;
}

.topics {
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 0;
    padding: 30rpx;
    button,
    .topic {
        width: 210rpx;
        height: 60rpx;
        margin-left: 0;
        color: $title-color;
        font-size: 28rpx;
        line-height: 60rpx;
    }
    .topic {
        margin-bottom: 30rpx;
        border: 1px solid $border-color;
        border-radius: 10rpx;
        &.active {
            border-color: $primary;
            .topic-image {
                filter: grayscale(0%);
            }
            .topic-name {
                color: #333;
            }
        }
        &-image {
            box-sizing: border-box;
            width: 58rpx;
            height: 58rpx;
            border-radius: 10rpx 0 0 10rpx;
            filter: grayscale(100%);
        }
        &-name {
            display: inline-block;
            box-sizing: border-box;
            width: 150rpx;
            height: 100%;
            padding: 0 20rpx;
            overflow: hidden;
            color: #808080;
            font-size: 26rpx;
        }
    }
}

.product {
    width: 100%;
    padding: 30rpx;
    border-top: 1rpx solid $border-color;
}

.productInfo {
    display: flex;
    width: 100%;
    height: 88rpx;
    background-color: $bgcolor-gray;
    .productImg {
        width: 88rpx;
        height: 88rpx;
        image {
            width: 100%;
            height: 100%;
        }
    }
    .productPrice {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        padding: 18rpx 20rpx 18rpx 20rpx;
        .title {
            color: $title-color;
            font-size: 24rpx;
        }
        .productCount {
            color: $info-color;
            font-size: 24rpx;
        }
        .options {
            color: $info-color;
            font-size: 20rpx;
        }
    }
}
